import { message } from 'antd'
import MyCard from '../components/MyCard';
import { apiAddUserIds, apigetUserIdsList,apigetAddUser } from '../api'
import  React, {useEffect, useState} from 'react'


const AddUser = () => {

    const [userIdsList, setUserIdsList] = useState([])

    const addUser = [
        {
            name: 'username',
            type: 'input',
            placeholder: '请输入用户名称'
        },
        {
            name: 'password',
            type: 'input',
            placeholder: '请输入密码'
        },
        {
            name: 'userId',
            type: 'select',
            placeholder: '请选择身份id',
            option: userIdsList
        }
    ]

    const addIds = [
        {
            name: 'idName',
            type: 'input',
            placeholder: '请输入身份名称'
        }
    ]
    
    const optionView = [
        {
            name: 'selectId',
            type: 'select',
            placeholder:'请选择身份id',
            option: userIdsList
        },
        {
            name: 'viewId',
            type: 'select',
            placeholder:'请选择视图',
            option: [
                {
                    value: '1',
                    label: '添加用户'
                }
            ]
        }
    ]

    // 在刚进入页面的时候 就需要调用身份列表
    useEffect(() => {
        getUserIds()
    }, [])

    // 获取身份列表
    const getUserIds = ()=> {
        apigetUserIdsList().then(res => {
            setUserIdsList(res.data)
        })
    } 


    const addUserIds = (data) => {
        // 添加身份
        apiAddUserIds({name: data.idName}).then(res=> {
            message.success('添加成功')
            // 添加完成身份之后 重新获取身份列表
            getUserIds()
        })
     }
     

     // 添加用户
     const addUserCallback = (data) => {
        apigetAddUser(data).then(res => {
            message.success('添加成功')
        })
     }



    return <div>

        <MyCard list={addUser} title="添加用户"  ongetDate={addUserCallback} />
    
        <MyCard title="添加身份" list={addIds} ongetDate={addUserIds} />

        <MyCard title="给身份设置视图权限" list={optionView}  />

    </div>
}

export default AddUser